<template>
    <Steps :current="cur">
    <div class="step-box">

        <!-- <Step  @click="goto" title="风险测评" content="测评您的风险承担能力"></Step>
        <Step title="投资总金额" content="填写您的投资总金额"></Step>
        <Step title="智能推荐" content="根据前两步推荐投资组合"></Step> -->
        <div class="step"  @click="goto(0)">
            <Step title="风险测评" content="测评您的风险承担能力"></Step>
        </div>
        <div class="step"  @click="goto(1)">
            <Step title="投资总金额" content="填写您的投资总金额"></Step>
        </div>
        <div class="step"  @click="goto(2)">
            <Step title="智能推荐" content="根据前两步推荐投资组合"></Step>
        </div>
        <div class="step"  @click="goto(3)">
            <Step title="方案回测" content="回测投资组合"></Step>
        </div>
    </div>
    </Steps>
    
</template>
<script>
    export default {
        props:['cur','step'],
        methods:{
            goto(data) {
                if (this.step >= data) {
                    this.$store.commit('setRecommendCurStep',data)
                    
                    console.log(data)
                } else {
                    this.$Message.info('请先完成当前步骤');
                }
                
            }
        }
    }
</script>
<style scoped>
.step-box{
    width: 100%;
    display: flex;
    justify-content:space-around;

}
.step{

}
</style>